<template>
  <div class="cityCont" @click.stop="">
    <div class="title">
      <h4>请选择城市</h4>
    </div>
    <div class="cont">
      <div class="contTitle">
        <span v-for="(items, idx) in cityKind" 
        :key="idx" 
        @click="changDetailsCities(idx)"
        >
          {{items.name}}
        </span>
      </div>
      <div class="contBox">
        <em v-for="(items, idx) in detailsCities" :key="idx">
          {{items}}
        </em>
      </div>
    </div>
  </div>
</template>
<script>
// 引入获取所有城市的接口
import { getAllCities } from "@/api"
export default {
  name: "selectcity",
  data() {
    return {
      cityKind: [],
      detailsCities: []
    }
  },
  created() {
    getAllCities().then((res)=>{
      const result = res.data.data[0].kind;
      result.forEach(val => {
        this.cityKind.push({
          name: val.title,
          children: val.lists
        });
      });
    this.detailsCities = this.cityKind[0].children;
    });
  },
  methods: {
    changDetailsCities(index){
      this.detailsCities = this.cityKind[index].children;
    }
  },
}
</script>
<style lang="less" scoped>
  .cityCont{
    width: 800px;
    height: 530px;
    background-color: #ffffff;
    position: relative;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
      .title{
        width: 100%;
        height: 70px;
        background-color: #5dd5c8;
        line-height: 70px;
          h4{
            margin-left: 20px;
            color: #424a5e;
          }
      }
      .cont{
        width: 100%;
        height: 460px;
        background-color: #7cc0ff;
          .contTitle{
            width: 100%;
            height: 40px;
            background-color: #f9fafb;
            display: flex;
            justify-content: space-between;
            align-items: center;
              span{
                display: block;
                height: 34px;
                min-width: 30px;
                text-align: center;
                background-color: #5dd5c8;
                color: #fff;
                line-height: 34px;
                border-radius: 4px;
                flex-shrink: 1;
                cursor: pointer;
                  &:hover{
                    background-color: #73ede0;
                  }
              }
          }
          .contBox{
            width: 100%;
            height: 420px;
            background-color: #fff;
            overflow: auto;
              em{
                display: inline-block;
                width: 152px;
                margin: 4px;
                height: 40px;
                border-radius: 4px;
                background-color: #fff;
                line-height: 40px;
                text-align: center;
                color: #424a5e;
                  &:hover{
                    color: #5dd5c8;
                  }
              }
          }
      }
  }
</style>